<template>
  <div style="height: 50px;">
    <!-- <el-steps direction="vertical" :active="active"  finish-status="success"> -->
    <el-steps :direction="direction" :active="active" simple finish-status="success">
      <el-step title="步骤 1"></el-step>
      <!-- <el-step title="步骤 2"></el-step> -->
      <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
      <el-step title="步骤 3" ></el-step>
    </el-steps>
  </div>

  <div style="height: 300px;">
    <!-- <el-steps direction="vertical" :active="active"  finish-status="success"> -->
    <el-steps :direction="direction" :active="active" finish-status="success" align-center>
      <el-step title="步骤 1"></el-step>
      <!-- <el-step title="步骤 2"></el-step> -->
      <el-step title="步骤 3" description="这是一段很长很长性文字这是一段很长很长很长的描述性文字
      这是一段很长很长很长的描述性文字这是一段很长很长很长的描述性文字这是一段很长很长很长的描
      述性文字这是一段很长很长很长的描述性文字这是一段很长很长很长的描述性文字这是一段很长很长
      很长的描述性文字这是一段很长很长很长的描述性文字"></el-step>
      <el-step title="步骤 3" ></el-step>
    </el-steps>
  </div>
  <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
  <el-button style="margin-top: 12px;" @click="pos">显示方式</el-button>
  <el-button style="margin-top: 12px;" @click="setSimple">simple</el-button>
<!-- vertical/horizontal -->
</template>

<script>
  export default {
    name: '',
    data() {
      return {
        active: 0,
        direction: 'vertical',
        simple: 'simple'
      }
    },
    methods: {
      next() {
        if (this.active++ > 2) this.active = 0;
      },
      pos() {
        if (this.direction == 'vertical') 
          this.direction = 'horizontal'
        else
          this.direction = 'vertical'
      },
      setSimple() {
        if (this.simple) this.simple= ''
        else this.simple='simple'
      }
    }
  }
</script>

<style scoped>
  .simple {
    /* "simple" */
  }

</style>
